<template>
  <div class="top-category">
    <div class="container">
      <!-- 面包屑 -->
      <xtx-bread>
        <xtx-bread-item to="/">首页</xtx-bread-item>
        <transition name="fade-right">
          <xtx-bread-item :key="obj.id" to="/category">
            {{ obj.name }}
          </xtx-bread-item>
        </transition>
      </xtx-bread>

      <!-- 轮播图 -->
      <div class="bannerBox">
        <home-banner></home-banner>
      </div>

      <!-- 所有二级分类 -->
      <div class="sub-list">
        <h3>全部分类</h3>
        <ul>
          <li v-for="i in obj.children" :key="i">
            <a href="javascript:;">
              <img :src="i.picture" />
              <p>{{ i.name }}</p>
            </a>
          </li>
        </ul>
      </div>

      <!-- 分类关联商品 -->
      <div class="ref-goods" v-for="(v, i) in catgoryObj" :key="i">
        <div class="head">
          <h3>{{ v.name }}</h3>
          <p class="tag">温暖柔软，品质之选</p>
          <xtx-more></xtx-more>
        </div>
        <div class="body">
          <goods-item
            v-for="item in v.goods"
            :key="item"
            :item="item"
          ></goods-item>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, watch, computed } from "vue";
import XtxBreadItem from "../../components/library/XtxBreadItem.vue";
import XtxBread from "../../components/library/XtxBread.vue";
import HomeBanner from "../../components/home/homeBanner.vue";
import { getClassify, categoryShop } from "@/api"; // 分类数据
import { useRoute } from "vue-router";
import GoodsItem from "./components/goodsItem.vue";
import { useStore } from "vuex";
export default {
  name: "index",
  setup(props, { emit }) {
    let route = useRoute();
    let obj = ref({});
    let catgoryObj = ref({});
    let store = useStore();
    let routerId = computed(() => route.query.id);
    watch(
      () => routerId.value,
      () => {
        // 判断是子路径
        if (routerId.value && `/category` == route.path) {
          //  route.path  可以获取当前的 路径
          getClassify().then((res) => {
            obj.value = res.result.find((item) => item.id == routerId.value);
          });
          // 把分类传到本地存储
          store.commit('bread', obj.value)
          // 各个分类商品的接口
          categoryShop(routerId.value).then((res) => {
            catgoryObj.value = res.result.children;
          });
        }
      },
      {
        deep: true,
        immediate: true,
      }
    );

    return { obj, catgoryObj };
  },
  components: { XtxBreadItem, XtxBread, HomeBanner, GoodsItem },
};
</script>

<style scoped lang="scss">
// 动画
.fade-right-enter-to,
.fade-right-leave-from {
  opacity: 1;
  transform: none;
}
.fade-right-enter-active,
.fade-right-leave-active {
  transition: all 1s;
}
.fade-right-enter-from,
.fade-right-leave-to {
  opacity: 0;
  transform: translate3d(20px, 0, 0);
}

.bannerBox {
  width: 100%;
  height: 500px;
}
.top-category {
  h3 {
    font-size: 28px;
    color: #666;
    font-weight: normal;
    text-align: center;
    line-height: 100px;
  }
  .sub-list {
    margin-top: 20px;
    background-color: #fff;
    ul {
      display: flex;
      padding: 0 32px;
      flex-wrap: wrap;
      li {
        width: 168px;
        height: 160px;
        a {
          text-align: center;
          display: block;
          font-size: 16px;
          img {
            width: 100px;
            height: 100px;
          }
          p {
            line-height: 40px;
          }
          &:hover {
            color: $xtxColor;
          }
        }
      }
    }
  }
}

// 分类
.ref-goods {
  background-color: #fff;
  margin-top: 20px;
  position: relative;
  .head {
    .xtx-more {
      position: absolute;
      top: 20px;
      right: 20px;
    }
    .tag {
      text-align: center;
      color: #999;
      font-size: 20px;
      position: relative;
      top: -20px;
    }
  }
  .body {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0 65px 30px;
  }
}
</style>
